<template>
  <el-dialog
    :close-on-click-modal="false"
    title="处理售后"
    :beforeClose="handleClose2"
    :visible.sync="dialogVisible2"
    width="500px">
    <el-form :model="form" size="mini" label-width="120px" :rules="rules" ref="form">
      <el-form-item label="客户名称：">
        {{form.customerName}}
      </el-form-item>
      <el-form-item label="商品信息：">
         {{ form.goodsList }}
      </el-form-item>
      <el-form-item label="处理结果：" prop="handleResult">
        <el-input v-model="form.handleResult" type="textarea" :rows="2"></el-input>
      </el-form-item>
      <el-form-item label="处理凭证：" >
        <div style="width:80px;height:80px;margin-bottom:10px;margin-right:10px;vertical-align: middle;position: relative;display:inline-block" v-for="(item,index) in form.handleCertificate">
          <img :src="item"  style="width:100%;height:100%;object-fit: contain;"/>
          <i class="el-icon-error" style="cursor: pointer;position: absolute;right:0;top:0;" @click="delImg(index)"></i>
        </div>
        <el-upload
          v-if="form.handleCertificate.length<5"
          class="avatar-uploader"
          action="https://upload.qiniup.com"
          :data="uploadToken"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose2">取 消</el-button>
        <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {getCustomerSetting,getCustomerOption,getQiniuToken} from '@/api/partner'
import {developAfterSaleHandle} from '@/api/company'
import {validatePhone} from '@/utils/validate';
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'

const defaultForm = {
  "applyId" : 1,  //售后申请单ID
  "handleResult" : "", //处理结果
  "handleCertificate" : [], //处理凭证
};
export default {
  name: "index",
  data(){

    return {
      dialogVisible2:false,
      title2:'',
      btnLoading2:false,
      form:JSON.parse(JSON.stringify(defaultForm)),
      rules:{
        handleResult:[{required: true, message: '此项必填', trigger: 'blur'},],
      },
      uploadToken:{
        token:'',
      },
      imgDomain:'',
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {

  },
  created() {

  },
  filters: {

  },
  methods:{




    //切换合同
    changeOrderSn(){
      let curItem = this.orderList.find((el)=>{
        return el.orderSn == this.form.orderSn
      })
      this.goodsList = curItem.ordGoodsList
    },

    //获取七牛TOKEN
    getUploadToken(){
      getQiniuToken().then((res)=>{
        this.uploadToken.token = res.token;
        this.imgDomain = res.domain
      })
    },
    //上传图片
    handleAvatarSuccess(res){
      this.form.handleCertificate.push(this.imgDomain+res.key)
    },

    //删除图片
    delImg(index){
      this.form.handleCertificate.splice(index,1)
    },

    //显示
    showPop(item){
      this.dialogVisible2 = true;
      this.form = JSON.parse(JSON.stringify(defaultForm));
        console.log("item",item)
        this.form.applyId = item.applyId;
        this.form.goodsList = item.goodsList;
        this.form.customerName = item.customerName;
        this.getUploadToken();
    },


    //关闭弹窗
    handleClose2(){
      this.$refs.form.clearValidate();
      this.dialogVisible2 = false;
      this.btnLoading2 = false;
    },

    //提交
    handleConfirm2(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.btnLoading2 = true;
          let data = JSON.parse(JSON.stringify(this.form));
          data.handleCertificate = data.handleCertificate.join(",")
          developAfterSaleHandle(data).then((res)=>{
            this.btnLoading2 = false;
            this.handleClose2();
            this.$emit('getList');
          }).catch(()=>{
            this.btnLoading2 = false;
          })
        }
      })
    },
  },
}
</script>

<style  lang="scss">
.avatar-uploader{
  margin-bottom:10px;
  display: inline-block;
  width:80px;
  height:80px;
  border:1px solid #DCDFE6;
  text-align: center;
  line-height: 80px;
  vertical-align: middle;
}
</style>
